@mixin button-size(
    $padding-y, $padding-x, 
    $font-size, 
    $border-radius
) {
    padding: $padding-y $padding-x;
    font-size: $font-size;
    border-radius: $border-radius;
}

@mixin alert-color($background,$color) {
    color: $color;
    background-color: $background;
}

@mixin button-color(
    $background,
    $border-color,
    $color,
    $hover-background: lighten($background, 7.5%),
    $hover-border-color: lighten($border-color, 10%),
    $hover-color: $color
){
    color: $color;
    background: $background;
    border-color: $border-color;
    &:hover{
        color: $hover-color;
        background: $hover-background;
        border-color: $hover-border-color;
    }
    &:focus, &.focus{
        color: $hover-color;
        background: $hover-background;
        border-color: $hover-border-color;
    }
    &[disabled], &.disabled{
        color: $color;
        background: $background;
        border-color: $border-color;
    }
}

@mixin zoom-animation(
    $direction: 'top',
    $scaleStart: scaleY(0),
    $scaleEnd: scaleY(1),
    $origin: center top
) {
    .zoom-in-#{$direction}-enter,
    .zoom-in-#{$direction}-appear {
        opacity: 0;
        transform: $scaleStart;
    }

    .zoom-in-#{$direction}-enter-active,
    .zoom-in-#{$direction}-appear-active {
        opacity: 1;
        transform: $scaleEnd;
        transform-origin: $origin;
        transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms,
        opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
    }

    .zoom-in-#{$direction}-exit {
        opacity: 1;
    }

    .zoom-in-#{$direction}-exit-active {
        opacity: 0;
        transform: $scaleStart;
        transform-origin: $origin;
        transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms,
        opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
    }
}

@mixin border-right-radius($raduis) {
    border-top-right-radius: $raduis;
    border-bottom-right-radius: $raduis;
}

@mixin border-left-radius($raduis) {
    border-top-left-radius: $raduis;
    border-bottom-left-radius: $raduis;
}